<template>
  <div>
    <div style="position: relative;height: 1vh;"></div>
    <div style="position: relative;height: 5vh;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items: center;">
      <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '1'" :key="index" plain type="primary"
        :icon="item.menuicon" @click="e_function_all(item.menuperms, item.menuRouter)">
        {{ item.menuName }}
      </el-button>
    </div>
    <div style="position: relative;height: 1vh;"></div>
    <div
      style="position: relative;height: 6vh;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);display: flex;align-items: center;margin-left: 1.8%;width: 97%;">
      角色名字 &nbsp;<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchMap.roleNameLike" clearable
        style="width: 10vw;">&nbsp;</el-input>&nbsp;
      <el-button icon="el-icon-search" plain type="primary" @click="SerchMore">查询</el-button>
    </div>
    <div style="position: relative;height: 1vh;"></div>
    <div style="position: relative;width: 97%;
        margin-left: 1.8%;box-shadow: 0px 0px 1px 1PX rgb(242, 240, 240);
        display: flex;align-items:flex-start;height: 70vh;overflow-y: scroll;">
      <el-table :data="list" row-key="roleId">
        <el-table-column prop="roleName" label="角色名字" width="190" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="roleDescription" label="角色描述" width="300" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="角色创建时间" width="200" :show-overflow-tooltip="true">
          <template v-slot="scope">
            {{ scope.row.roleTime }}
          </template>
        </el-table-column>
        <el-table-column prop="role_updatetime" label="角色修改时间" width="170" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="角色状态" width="180" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <el-tag v-if="scope.row.roleStatus == 0" type="info">禁用</el-tag>
            <el-tag v-if="scope.row.roleStatus == 1" type="success">正常</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="700" :show-overflow-tooltip="true">
          <template v-slot="scope">
            <el-button v-for="(item, index) in buttonMenu" v-if="String(item.menuType) == '3'" :key="index" 
              type="text" :icon="item.menuicon" @click="e_function_all(item.menuperms, scope.row)">
              {{ item.menuName }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 100]" :page-size="10"
      layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>




    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="80px" :model="pojo" :rules="rules" ref="pojo">
        <el-form-item label="角色id" prop="roleId">
          <el-input v-model="pojo.roleId" disabled />
        </el-form-item>
        <el-form-item label="角色名字" prop="roleName">
          <el-input v-model="pojo.roleName" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDescription">
          <el-input v-model="pojo.roleDescription" />
        </el-form-item>
        <el-form-item label="角色状态" prop="roleStatus">
          <el-select v-model="pojo.roleStatus" placeholder="请选择">
            <el-option label="禁用" :value="0">
            </el-option>
            <el-option label="启用" :value="1">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="角色创建时间" prop="roleTime">
          <el-input v-model="pojo.roleTime" disabled />
        </el-form-item> -->
        <el-button type="primary" @click="handleSave('pojo')">保存</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </el-form>
    </el-dialog>

  </div>
</template>
  
<script>
import roleApi from '@/api/roleRequest'
import { getNowFormatDate } from '@/common/timeUtils'
export default {
  // 组件名称
  name: 'roles',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      //存放查询的值
      list: [],
      //存放总数
      count: 20,
      //查询的map
      searchMap: {
        roleId: null,
        roleNameLike: null,
        pageNum: 1,
        pageSize: 10,
      },
      //添加或修改的实体
      pojo: {
        roleId: null,
        roleName: null,
        roleDescription: null,
        roleTime: null,
        roleStatus: 1,
      },
      //表单的验证
      rules: {
        roleName: [
          { required: true, message: '请输入角色名字', trigger: 'change' }
        ],
        roleDescription: [
          { required: true, message: '请输入角色描述', trigger: 'change' }
        ],
      },
      dialogFormVisible: false,
      dialogFormVisibleTwo: false,
      //添加或修改的判断
      id: '',
    }
  },
  // 计算属性
  computed: {
    //获取vuex的数据
    buttonMenu() {
      return this.$store.getters['operation/getButtonList'];
    },
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //动态按钮执行方法
    e_function_all(function_name, function_data) {
      if (function_name == 'handleEdit') {
        this.handleEdit('');
      } else if (function_name == 'updateRole') {
        this.handleEdit(function_data.roleId);
      } else if (function_name == 'deletebyid') {
        this.handleDelete(function_data.roleId);
      } else if (function_name == 'roleMenuAuthority') {
        this.RouteUpdate(function_data.roleId);
      }
    },
    //计算时间
    caculTime(timex) {
      return getNowFormatDate(timex)
    },
    //修改权限
    RouteUpdate(roleid) {
      this.$store.commit("homex/ROLEIDAUTOUPDATE", roleid);
      this.$store.commit("homex/AUTOUPJUDGE", 'authority');
    },
    //查询更多的实现
    SerchMore() {
      if (this.searchMap.roleId == '') this.searchMap.roleId = null;
      if (this.searchMap.roleNameLike == '') this.searchMap.roleNameLike = null;
      this.searchMap.pageNum = 1;
      this.searchMap.pageSize = 9;
      this.fetchData();
    },
    //查询数量
    fetchData() {
      //编写一个方法请求后端的接口，把返回的数据赋值list
      roleApi.selectList(this.searchMap).then(response => {
        //把返回的结果赋值模型        
        this.list = response.data.data;
        this.count = response.data.total
      })
    },
    //当分页大小产生变化的时候调用该方法
    sizeData(size) {
      this.searchMap.pageSize = size - 1
      this.fetchData()
    },
    pageData(page) {
      this.searchMap.pageNum = page
      this.fetchData()
    },
    //新增和修改使用同一个函数打开弹窗，区别是新增没有id
    handleEdit(id) {
      this.id = id
      //打开弹窗
      this.dialogFormVisible = true
      if (id !== '') {
        //根据id查询数据绑定到模型上面
        roleApi.selectByRoleId(id).then(reponse => {
          this.pojo = reponse.data;
        })
      } else {
        this.pojo = {
          roleId: null,
          roleName: null,
          roleDescription: null,
          roleTime: null,
          roleStatus: 1,
        } //清空数据
      }
    },
    //新增和修改保存数据的方法
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id === null || this.id === '') {
            roleApi.insert(this.pojo).then(reponse => {

              //重新加载列表数据
              this.fetchData()
              //关闭弹窗
              this.dialogFormVisible = false
            })
          } else {
            roleApi.updateByRoleId(this.pojo).then(reponse => {
              //新增或者修改成功

              //重新加载列表数据
              this.fetchData()
              //关闭弹窗
              this.dialogFormVisible = false

            })
          }
        } else {
          this.$message({
            message: '请输入数值',
            type: 'error'
          })
          return false;
        }
      });

    },
    handleDelete(id) {
      this.$confirm('您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        roleApi.deleteByRoleId(id).then(reponse => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //导出Excel
    ExportExcelx() {
      var id = this.searchMap.roleId;
      var NameLike = this.searchMap.roleNameLike;
      if (this.searchMap.roleId == '' || this.searchMap.roleId == null) id = 0;
      if (this.searchMap.roleNameLike == '' || this.searchMap.roleNameLike == null) NameLike = "NULL";
      roleApi.ExportExcel(this.searchMap.pageNum, this.searchMap.pageSize
        , id, NameLike).then(res => {
          const blob = new Blob([res.data], { type: "application/vnd.ms-excel" })
          const a = document.createElement("a")
          let fileName = '角色信息' + '.xls'
          a.download = fileName;
          a.href = window.URL.createObjectURL(blob);
          a.click()
          a.remove()
        }).catch(
          error => {
            if (error.response.status == 500) {
              // ElMessage.error({
              //   message: '系统请求超时'
              // });
            }
          }
        )
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 在实例初始化之后，组件属性计算之前，如data属性等
  */
  beforeCreate() {
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {
    //在创建vue实例后触发初始化钩子函数
    this.fetchData();
  },
  /**
  * 在挂载开始之前被调用：相关的 render 函数首次被调用。
  */
  beforeMount() {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted() {
  },
  /**
  * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  */
  beforeUpdate() {
  },
  /**
  * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  */
  updated() {
  },
  /**
  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
  */
  activated() {
  },
  /**
  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
  */
  deactivated() {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy() {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed() {
  }
}
</script> 
  
  
<style scoped></style>
  
  